<template>
  <div class="page-main">
    <el-breadcrumb class="breadcrumb">
      <el-breadcrumb-item>管理员</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="main-content">
      <div class="box-card">
        <span style="color: #101010; font-size: 16px">用户管理</span>
      </div>
      <div class="box-body">
        <div class="search">
          <div style="margin-top: 20px">
            <el-input
                placeholder="请输入用户名"
                prefix-icon="el-icon-search"
                v-model="status.keywords"
                style="width: 250px; margin-right: 20px"
                clearable
                @keyup.enter="getUserList"
                @clear="getUserList"
            />
            <el-select v-model="status.userRole" @change="getUserList">
              <el-option v-for="item in status.userRoleOptions" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
            <el-button
                type="primary"
                icon="el-icon-search"
                @click="getUserList()"
                style="margin-left: 10px"
            >
              搜索
            </el-button>
          </div>
        </div>
        <div class="table">
          <el-table :data="status.userList" style="width: 100%">
            <el-table-column type="index" align="center" />
            <el-table-column label="头像" align="center">
              <template #default="scope">
                <img src="https://img.yzcdn.cn/vant/custom-empty-image.png" v-if="!scope.row['userUrl'] || scope.row['userUrl'].length === 0" />
                <img :src="scope.row['userUrl']" v-else />
              </template>
            </el-table-column>
            <el-table-column prop="userId" label="用户ID" align="center" />
            <el-table-column prop="userName" label="用户名" align="center" />
            <el-table-column label="角色" align="center">
              <template #default="scope">
                <el-tag type="primary" v-if="scope.row.userRole === 1">用户</el-tag>
                <el-tag type="success" v-else-if="scope.row.userRole === 2">店主</el-tag>
                <el-tag type="danger" v-else-if="scope.row.userRole === 3">管理</el-tag>
              </template>
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                align="center"
                width="100"
            >
              <template #default="scope">
                <el-button type="text" @click="showDetail(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page-div">
          <el-pagination
              v-model:currentPage="pageStatus.currentPage"
              v-model:page-size="pageStatus.pageSize"
              :page-sizes="[5, 10, 20]"
              :pager-count="5"
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageStatus.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
  <el-dialog
      v-model="userDialog.showFlag"
      title="订单详情"
      width="50%"
      :before-close="closeUserDialog"
  >
    <div>
      <el-form
          ref="refForm"
          :rules="status.rules"
          label-position="right"
          label-width="120px"
          :model="userDialog.data"
      >
        <el-form-item label="角色">
          <el-select v-model="userDialog.data.userRole" disabled>
            <el-option v-for="item in status.userRoleOptions" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="ID">
          <el-input disabled v-model="userDialog.data.userId" style="width: 90%;" />
        </el-form-item>
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="userDialog.data.userName" style="width: 90%;" />
        </el-form-item>
        <el-form-item label="头像" v-if="userDialog.data.userRole === 1">
          <div class="logo-div">
            <div class="logo-area">
              <img class="logoImg" src="https://img.yzcdn.cn/vant/custom-empty-image.png" v-if="!userDialog.data.userUrl || userDialog.data.userUrl.length === 0" />
              <img class="logoImg" :src="userDialog.data.userUrl" v-else />
            </div>
            <div class="upload-button-div">
              <el-button style="height: 50px" @click="changeToCommon">
                <div class="button">
                  <img src="@/assets/img/shopInfo/img.png" />
                  <span>改为默认</span>
                </div>
              </el-button>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="用户真名" v-if="userDialog.data.userRole === 1" prop="userRealName">
          <el-input v-model="userDialog.data.userRealName" v-if="userDialog.data.userRole === 1" style="width: 90%;" />
        </el-form-item>
        <el-form-item label="性别" v-if="userDialog.data.userRole === 1">
          <el-select v-model="userDialog.data.userSex" disabled>
            <el-option label="男" :value="null"/>
            <el-option label="男" value="1"/>
            <el-option label="女" value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话" v-if="userDialog.data.userRole === 1">
          <el-input disabled v-model="userDialog.data.userPhone" style="width: 90%;" />
        </el-form-item>
      </el-form>
      <el-table :data="userDialog.data.shopList" style="width: 100%" v-if="userDialog.data.userRole === 2">
        <el-table-column type="index" align="center" />
        <el-table-column label="头像" align="center">
          <template #default="scope">
            <img class="table-image" src="https://img.yzcdn.cn/vant/custom-empty-image.png" v-if="!scope.row['frontImgUrl'] || scope.row['frontImgUrl'].length === 0" />
            <img class="table-image" :src="scope.row['frontImgUrl']" v-else />
          </template>
        </el-table-column>
        <el-table-column prop="shopName" label="商店名" align="center" />
        <el-table-column label="状态" align="center">
          <template #default="scope">
            <div v-if="scope.row.state === 1">待审核</div>
            <div v-else-if="scope.row.state === 2">已上架</div>
            <div v-else-if="scope.row.state === 3">已下架</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="managerUpdateUserInfo">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {httpPostManage} from "@/api/httpService";
import {ElMessage} from "element-plus";

const refForm = ref(null);

const status = reactive({
  keywords: "",
  userRole: null,
  userRoleOptions: [
    {
      label: "全部",
      value: null
    },
    {
      label: "管理员",
      value: 3
    },
    {
      label: "店主",
      value: 2
    },
    {
      label: "用户",
      value: 1
    }
  ],
  userList: [],
  rules: {
    userName: [
      { required: true, message: "请输入用户名字", trigger: "blur" }
    ],
    userRealName: [
      { required: true, message: "请输入用户真名", trigger: "blur" }
    ]
  }
});

// let url = "https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKAV5SXKLVxD0QjXh6w8ByhsCgb8TWE8bZpDdR67uONL7Q9CeRfzBUIpIpn8ZG4iaiaI8Afibp8dj4wA/132"

const getUserList = async () => {
  let url = "/getAllUsers";
  let params = {
    keywords: status.keywords,
    state: status.userRole,
    currentPage: pageStatus.currentPage,
    pageSize: pageStatus.pageSize
  }
  let res = await httpPostManage(url, params);
  status.userList = res.data.data;
  pageStatus.total = res.data.total;
}

const userDialog = reactive({
  showFlag: false,
  data: {
    userId: "",
    userName: null,
    userPhone: null,
    userRealName: null,
    userRole: "",
    userSex: null,
    userUrl: null,
    shopList: []
  }
});

/**
 * userDialog模块
 **/
const showDetail = async (item) => {
  // let url = "/managerGetOneUserInfo";
  // let params = {
  //   userId: id
  // }
  // let res = await httpPostManage(url, params);
  for (let p in userDialog.data) {
    userDialog.data[p] = item[p] ? item[p] : userDialog.data[p];
  }
  if (userDialog.data.userRole === 2) {
    await getOwnerShopList(userDialog.data.userId);
  }
  console.log(userDialog.data.userSex)
  userDialog.showFlag = true;
}

const getOwnerShopList = async (id) => {
  let url = "/managerShopOwnerSearch";
  let params = {
    ownerId: id
  }
  let res = await httpPostManage(url, params);
  userDialog.data.shopList = res.data;
}

const closeUserDialog = () => {
  refForm.value.resetFields();
  let obj = {
    userId: "",
    userName: null,
    userPhone: null,
    userRealName: null,
    userRole: "",
    userSex: null,
    userUrl: null,
    shopList: []
  }
  userDialog.data = obj;
  userDialog.showFlag = false;
}

const changeToCommon = () => {
  userDialog.data.userUrl = "https://img.yzcdn.cn/vant/custom-empty-image.png"
}

const managerUpdateUserInfo = () => {
  refForm["value"].validate(async (valid) => {
    if (valid) {
      let url = "/managerUpdateUserInfo";
      await httpPostManage(url, userDialog.data);
      ElMessage.success("修改成功");
      await getUserList();
      closeUserDialog();
    }
  });
}

/**
 * 分页模块
 **/
//#region 分页模块
const pageStatus = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
});

//改变每页页数
const handleSizeChange = (val) => {
  pageStatus.pageSize = val;
  getUserList();
};

//改变当前页
const handleCurrentChange = (val) => {
  pageStatus.currentPage = val;
  getUserList();
};

onMounted(async () => {
  await getUserList();
});
</script>

<style lang="scss" scoped>
@import "../../assets/style/layout.scss";
</style>